import React from "react";
import {Button, Table, Divider, Tag, Card, Modal} from "antd";
import axios from "../../components/Engineering/axios";
import K from "../../components/Engineering/utils";

import {
  domain,
  apiPath,
  mockiMitateData
} from "../../config/web.domain.config";

export default class Temo extends React.Component {
  state = {
    dynamicDataSource: [], //动态列表数据资源
    SelectedRowKeys: [], // Check here to configure the default column
    checkboxSelectedRows: [],
    raidoSelectedRowKeys: "3", // Check here to configure the default column
    raidoSelectedRows: "",
    loading: false,
    hasSelected: false,
    pagination: "function()",
  };
  params = {
    page: 1
  };

  componentWillMount() {
    this.getDemoList();
  }


  componentWillUnmount() {
    clearTimeout(this.getDemoListTimer)
    this.setState = (state, callback) => {
      return;
    };
  }

  async getDemoList() {
    try {
      let {status, data} = await axios.get(`${mockiMitateData}/table/list`, {params: {page: this.params.page}});

      if (status !== 200) return;
      let _this = this;
      this.getDemoListTimer = setTimeout(() => {
        this.setState({
          dynamicDataSource: data.content.list.map((item, index) => {
            return {
              key: index.toString(),
              name: item.cname,
              age: item.age,
              address: item.address,
              email: item.email,
              image: item.image,
              currentTime: item.currentTime
            };
          }),
          SelectedRowKeys: [], // Check here to configure the default column
          checkboxSelectedRows: [],
          hasSelected: "",
          loading: false,
          pagination: K.pagination(data, current => {
            _this.params.page = current;
            this.getDemoList();
          })
        });
      }, 100)
    } catch (e) {
      console.error(e);
    }
  }

  handleALLDelect = () => {
    this.setState({
      loading: true
    });
    Modal.info({
      title: "确定要删除",
      content: this.state.checkboxSelectedRows
        .map(item => {
          return item.name;
        })
        .join(","),
      onOk: () => {
        this.getDemoList();
      }
    });
  };

  render() {
    const columns = [
      {
        title: "Name",
        dataIndex: "name",
        key: "name",
        render: text => <a href="javascript:;">{text}</a>
      },
      {
        title: "Age",
        dataIndex: "age",
        key: "age"
      },
      {
        title: "Address",
        dataIndex: "address",
        key: "address"
      },
      {
        title: "Tags",
        key: "tags",
        dataIndex: "tags",
        render: tags => (
          <span>
            {tags.map(tag => {
              let color = tag.length > 5 ? "geekblue" : "green";
              if (tag === "loser") {
                color = "volcano";
              }
              return (
                <Tag color={color} key={tag}>
                  {tag.toUpperCase()}
                </Tag>
              );
            })}
          </span>
        )
      },
      {
        title: "Action",
        key: "action",
        render: (text, record) => (
          <span>
            <a href="javascript:;">Invite {record.name}</a>
            <Divider type="vertical"/>
            <a href="javascript:;">Delete</a>
          </span>
        )
      }
    ];

    const data = [
      {
        key: "1",
        name: "John Brown",
        age: 32,
        address: "New York No. 1 Lake Park",
        tags: ["nice", "developer"]
      },
      {
        key: "2",
        name: "Jim Green",
        age: 42,
        address: "London No. 1 Lake Park",
        tags: ["loser"]
      },
      {
        key: "3",
        name: "Joe Black",
        age: 32,
        address: "Sidney No. 1 Lake Park",
        tags: ["cool", "teacher"]
      }
    ];

    const dynamicColumns = [
      {
        title: "姓名",
        dataIndex: "name",
        key: "name",
        render: text => <a href="javascript:;">{text}</a>,
        sorter: (a, b) => a.age - b.age,
        sortDirections: ['descend', 'ascend'],
      },

      {
        title: "年龄",
        dataIndex: "age",
        key: "age",
        filters: [
          {
            text: '18',
            value: '18',
          },
          {
            text: '19',
            value: '19',
            children: [
              {
                text: '20',
                value: '20',
              },
              {
                text: '21',
                value: '21',
              },
            ],
          },
        ],
        // onFilter: (value, record) => record.age.includes(value),
        onFilter: (value, record) => record.age.indexOf(value) === 0,  //todo kim-stamp 过滤

      },

      {
        title: "地区",
        dataIndex: "address",
        key: "Address"
      },
      {
        title: "邮箱",
        dataIndex: "email",
        key: "email"
      },

      {
        title: "创建时间",
        dataIndex: "currentTime",
        key: "currentTime"
      },

      {
        title: "图片",
        dataIndex: "image",
        key: "image",
        render: image => <img src={image}/>
      }
    ];


    return (
      <div>
        <Card title="演示表格">
          <Table
            columns={columns}
            dataSource={data ? data : null}
            // bordered
            rowSelection={{
              type: "radio",
              selectedRowKeys: this.state.raidoSelectedRowKeys
            }}
            onRow={(record, index) => {
              return {
                onClick: () => {
                  console.log(record, index);
                  Modal.info({
                    title: "信息",
                    content: `name:${record.name},Address:${record.address}`
                  });
                  this.setState({
                    raidoSelectedRowKeys: record.key,
                    raidoSelectedRows: record
                  });
                }
              };
            }}
            pagination={true}
          />
        </Card>

        <Card title="演示表格" style={{marginTop: 10}}>
          <Button
            type="primary"
            style={{marginBottom: 10}}
            onClick={this.handleALLDelect}
            disabled={!this.state.hasSelected}
            loading={this.state.loading}
          >
            删除
          </Button>
          <span style={{marginLeft: 8}}>
            {this.state.hasSelected
              ? `Selected ${this.state.hasSelected.length} items`
              : ""}
          </span>

          <Table
            rowSelection={{
              type: "checkbox",
              selectedRowKeys: this.state.SelectedRowKeys,
              onChange: (selectedRowKeys, selectedRows) => {
                this.setState({
                  SelectedRowKeys: selectedRowKeys,
                  checkboxSelectedRows: selectedRows,
                  hasSelected: selectedRows
                });
              },
              getCheckboxProps: record => ({
                disabled: record.age === (20 || 30 || 21), // Column configuration not to be checked
                name: record.name
              })
            }}
            onRow={(record, index) => {
              return {
                onClick: () => {
                  console.log(record)
                  this.setState({
                    SelectedRowKeys: index,
                    checkboxSelectedRows: record,
                    hasSelected: this.state.SelectedRowKeys
                  });
                },
              }
            }}
            columns={dynamicColumns}
            dataSource={
              this.state.dynamicDataSource ? this.state.dynamicDataSource : null
            }
            // bordered
            pagination={this.state.pagination}
            // scroll={{x:2000}}
          />
        </Card>
      </div>
    );
  }
}
